<template>
    <div>
        <i class="el-icon-circle-plus-outline" v-show="isOwnBook(1)" @click="dialogFormVisible = true"></i>
        <el-dialog
                title="添加/修改图书"
                :visible.sync="dialogFormVisible"
                @close="clear">
            <el-form v-model="form" style="text-align: left" ref="dataForm">
                <el-form-item label="书名" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" autocomplete="off" placeholder="不加《》"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth" prop="author">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <!--时间选择组件-->
                <el-form-item label="出版日期" :label-width="formLabelWidth" prop="date">
                    <el-date-picker
                            v-model="form.date"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
<!--                    <el-input v-model="form.date" autocomplete="off"></el-input>-->
                </el-form-item>

                <el-form-item label="出版社" :label-width="formLabelWidth" prop="press">
                    <el-input v-model="form.press" autocomplete="off"></el-input>
                </el-form-item>
                <!--导入图片上传组件-->
                <el-form-item label="封面" :label-width="formLabelWidth" prop="cover">
                    <el-input v-model="form.cover" autocomplete="off" placeholder="图片 URL"></el-input>
                    <img-upload @onUpload="uploadImg" ref="imgUpload"></img-upload>
                </el-form-item>

                <!---->
                <el-form-item label="简介" :label-width="formLabelWidth" prop="abs">
                    <el-input type="textarea" v-model="form.abs" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类" :label-width="formLabelWidth" prop="cid">
                    <el-select v-model="form.category.id" placeholder="请选择分类" @change="changeIndex">
                        <el-option :label="category.name"  :value="category.id" v-for="(category,index) in categories" :key="index" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="id" style="height: 0">
                    <el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import ImgUpload from "@/components/ImgUpload"

    export default {
        name: 'EditForm',
        components: {
            ImgUpload
        },
        data() {
            return {
                dialogFormVisible: false,
                form: {
                    id: '',
                    title: '',
                    author: '',
                    date: '',
                    press: '',
                    cover: '',
                    abs: '',
                    cid:"",
                    category: {
                        id: "",
                        name: ""
                    }
                },
                formLabelWidth: '120px',
                categories: [],
                // 日期选择
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            }
        },
        methods: {
            isOwnBook(userId){
                if(this.$store.getters.getUserInfo !== null){
                    const localUserId =  this.$store.getters.getUserInfo.id;
                    return localUserId !== null && localUserId ===userId;
                }else{
                    return false
                }
            },
            clear() {
                this.form = {
                    id: '',
                    title: '',
                    author: '',
                    date: '',
                    press: '',
                    cover: '',
                    abs: '',
                    cid:"",
                    category: {
                        id: "",
                        name: ""
                    }
                }
            },
            onSubmit(){
                this.$axios
                    .post('/books', {
                        id: this.form.id,
                        cover: this.form.cover,
                        title: this.form.title,
                        author: this.form.author,
                        date: this.form.date,
                        press: this.form.press,
                        abs: this.form.abs,
                        cid:this.form.cid,
                        category: this.form.category
                    }).then(resp => {
                    if (resp && resp.status === 200) {
                        this.dialogFormVisible = false
                        this.$emit('onSubmit')
                    }
                })
            },
            // 文件上传（图片）
            uploadImg() {
                this.form.cover = this.$refs.imgUpload.url
            },
            getCategories() {
                const _this = this
                _this.$axios.get("/categories").then(res => {
                    console.log(res)
                    _this.categories = res.data.data
                })
            },
            changeIndex(val){
                const _this = this
                console.log("选中项发生变化",val)

                if(val){
                    let obj = {}
                    obj = this.categories.find(item =>{
                        return item.id === val
                    })
                    // 使用set方法赋值
                    _this.$set(_this.form,_this.form.category.id,parseInt(obj.id))
                    //
                    _this.form.category.name = obj.name

                }
            }
        },

        created() {
            this.getCategories();
        }
    }
</script>

<style scoped>
    .el-icon-circle-plus-outline {
        margin: 50px 0 0 20px;
        font-size: 100px;
        float: left;
        cursor: pointer;
    }
</style>



